<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css"/>
    <script src="./js/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>

<body>
    <!-- 头部 -->
    <header>
        <nav class="contatier">
            <div class="logo-pic"></div>
        </nav>
        <div class="contatier">
            <img src="./img/重构测试-pc_03.png" alt="">
        </div>
    </header>
    <!-- 内容 -->
    <main id="app">
        <div class="section-one contatier">
            <div class="one">
                <p>活动时间：2017年2月13日到2月18日</p>
                <p>你好，请<a href="javascript:;">登录</a></p>
            </div>
            <div class="two">
                <!-- <div></div>
                <div></div>
                <div></div>
                <div></div> -->
                <img src="./img/标题@2x.png" alt="">
            </div>
            <div class="three">
                <div>
                    <ul>
                        <li>
                            <span>
                                <img src="./img/底座@2x.png" alt="">
                                <span></span>
                            </span>
                            <p>16EC巨星3强BEST100（含UL 1强）*1</p>
                        </li>
                        <li>
                            <span>
                                <img src="./img/底座@2x.png" alt="">
                                <span></span>
                            </span>
                            <p>16EC巨星3强BEST100（含UL 1强）*1</p>
                        </li>
                        <li>
                            <span>
                                <img src="./img/底座@2x.png" alt="">
                                <span></span>
                            </span>
                            <p>16EC巨星3强BEST100（含UL 1强）*1</p>
                        </li>
                        <li>
                            <span>
                                <img src="./img/底座@2x.png" alt="">
                                <span></span>
                            </span>
                            <p>16EC巨星3强BEST100（含UL 1强）*1</p>
                        </li>
                        <li>
                            <span>
                                <img src="./img/底座@2x.png" alt="">
                                <span></span>
                            </span>
                            <p>16EC巨星3强BEST100（含UL 1强）*1</p>
                        </li>
                    </ul>
                </div>
                <div class="btn-out">
                    <div class="btn">
                        <p>一键领取<strong>3月</strong>生日礼包</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-two contatier">
            <div class="one">
                <!-- <div></div>
                <div></div>
                <div></div>
                <div></div> -->
                <img src="./img/标题02@2x.png" alt="">
            </div>
            <div class="two">
                <p>礼包刷新倒计时：<strong>1小时33分33秒</strong></p>
            </div>
            <div class="three">
                <div class="btn-out">
                    <div class="btn">
                        <p>抽取神秘折扣</p>
                    </div>
                </div>
                <div class="text">
                    <a href="javascript:;">查看我的购买记录</a>
                    <p>[每日16：00和24：00将重新抽取折扣并刷新礼包]</p>
                </div>
            </div>
            <div class="four">
                <ul>
                    <li class="first-list" v-for="(item, index) of four_list">
                        <div @click="changShow(index)">
                            <img src="./img/边框@2x.png" alt="">
                            <span :class="{dspNone: four_list_show == index }"></span>
                            <!-- <ul>
                                <li> <span class="pic"></span> </li>
                                <li> <span class="pic"></span> </li>
                                <li> <span class="pic"></span> </li>
                                <li> <span class="pic"></span> </li>
                            </ul> -->
                            <img src="./img/45578@2x.png" alt="" class="click-pic" :class="{dspNone: four_list_show != index}">
                            <p class="text-1" :class="{dspNone: four_list_show != index}">{{ item['name'] }}</p>
                            <p class="text-2" :class="{dspNone: four_list_show == index}">{{ item['oem'] }}*{{ item['num'] }}</p>
                        </div>
                        <div :class="{dspNone: four_list_show != index}">
                            <p v-for="content of item['contents']">{{ content['name'] }}*{{ content['num'] }}</p>
                        </div>
                        <div>
                            <p>原价：{{ item['original-price'] }}Q币</p>
                            <p>现价：{{ item['present-price'] }}Q币</p>
                            <!-- <div class="btn"> -->
                            <span @click="buyBtn(index)" :class="inbuyBtnList(index) ? 'bought-btn':'buy-btn'">{{ inbuyBtnList(index) ? buyText[1] : buyText[0] }}</span>
                            <!-- </div> -->
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </main>
    <!-- 底部 -->
    <footer>
        <div class="contatier">
            <div class="one">
                <!-- <div></div>
                <div></div>
                <div></div>
                <div></div> -->
                <img src="./img/标题03@2x.png" alt="">
            </div>
            <div class="two">
                <ul>
                    <li>
                        <span></span>
                        <span>活动时间：2018年1月17日—1月31日23:59</span>
                    </li>
                    <li>
                        <span></span>
                        <span>在2017年1月31日前成功注册游戏角色的玩家可在页面领取1月生日礼包1个；</span>
                    </li>
                    <li>
                        <span></span>
                        <span> 每天16:00和24:00可在活动页面抽取神秘折扣，16:00抽取的折扣，限16:00-24:00使用，24:00抽取的折扣，限00:00-16:00使用；</span>
                    </li>
                    <li>
                        <span></span>
                        <span>活动期间页面每天16:00和24:00自动刷新幸运礼包，每个时间段更新6个礼包；</span>
                    </li>
                    <li>
                        <span></span>
                        <span> 当日15:59:50—16:00:10和当日23:59:50—次日00:00:10为折扣和礼包更新时间，期间暂不能抽取折扣和购买礼包；</span>
                    </li>
                    <li>
                        <span></span>
                        <span>每个QQ号在活动期间内每天限购一次同一幸运礼包；</span>
                    </li>
                    <li>
                        <span></span>
                        <span>礼包购买成功后，将自动发放到游戏礼物盒内，请注意查收。</span>
                    </li>
                </ul>
            </div>
        </div>
    </footer>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            four_list: [],
            four_list_show: null,
            buyText: ['立即购买','已购买'],
            buyBtnList: [],
        },
        created() {
            for(let i=0; i<6; i++){
                this.four_list.push({
                    'name': '绿茵终极混合球员包',
                    'oem': '14经典巨星混合BEST200（包含传奇）',
                    'num': 1,
                    'contents':[
                        {'name':'LP巨星3强BEST100（含UL 1强）','num':6},
                        {'name':'16EC巨星3强BEST100A（含UL 1强）','num':6},
                        {'name':'CP巨星（3强）BEST100（含UL 1强）','num':6},
                        {'name':'最佳赛季巨星3强BEST100（含UL 1强）','num':6},
                    ],
                    'original-price': '？？',
                    'present-price': '？？'
                })
                // this.buyBtnList.push(false)
            }
            // console.log(this.buyBtnList);
            
        },
        methods: {
            changShow(index){ 
                this.four_list_show = this.four_list_show != index ? index: null
            },
            buyBtn(index){
                if(this.inbuyBtnList(index)) return
                this.buyBtnList.push(index);
            },
            inbuyBtnList(index){
                for(var i = 0; i < this.buyBtnList.length; i++){
                    if(index === this.buyBtnList[i]) return true;
                }
                return false;
            }
        },
    })
</script>
</body>

</html>